<template>
  <div>
    <div class="top">
      <div class="comeback">
        <div @click="comeback">
          <img src="../../assets/other/goback.png" alt="">
        </div>
      </div>
      <section class="seachGoods">
        <input type="text" placeholder="请输入商品名称" v-model="seachCnt">
        <section>
          <img src="../../assets/other/seach.png" @click="seach" alt="">
        </section>
      </section>
    </div>
    <div>
      <!-- <section v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" infinite-scroll-immediate-check="loading"> -->
      <div v-for="(good,index) of collectedGoods" :key="index" @click="turnDetailPage(good.productId)" class="goods">
        <section class="goods-img" :style="{height:ImgHeight}">
          <img :src="good.simplImg" alt="">
        </section>
        <section class="goods-info">
          <p class="goods-info-name">
            {{good.productName}}
          </p>
          <p class="goods-price">
            ￥{{good.price}}
          </p>
          <section>
            <section class="div-blank"></section>
          </section>
        </section>
        <section class="collectedLogo" @click="cancelCollection(good.skuId)" @click.stop>
          <img src="../../assets/other/sc2.png" alt="">
        </section>
      </div>
        <!-- <loadmore v-show="loadingDom"></loadmore>
      </section> -->
    </div>
  </div>
</template>
<script>
  import { InfiniteScroll, MessageBox } from 'mint-ui'
  // import loadmore from '../../components/loadmore'
  import goback from '../../components/goback'
  import { userInfoGet } from '../../libs/publicMethod.js'
  import { joinMyFindOrFoot, queryFindOrFoot, getProductInfosBySkuId } from '../../libs/interface'
  export default {
    components: { InfiniteScroll, goback, userInfoGet, joinMyFindOrFoot, queryFindOrFoot, getProductInfosBySkuId, MessageBox },
    data () {
      return{
        // loading: false, // 下拉参数
        // loadingDom: false,
        ImgHeight: '',
        seachCnt: '', // 搜索框内容
        collectedGoods: [],
        isSearch: false,
      }
    },
    methods: {
      comeback() {
        let vm = this
        if (vm.isSearch) {
          vm.isSearch = false
          let params = {
            memberId: userInfoGet().id,
            type: 1,
          }
          queryFindOrFoot(params, (data) => {
            if (data.code === 1 && data.payload.length > 0) {
              vm.collectedGoods = data.payload.reverse()
              for (let elem of vm.collectedGoods) {
                elem.price = (elem.price / 100).toFixed(2)
                let param = {
                  skuId: elem.skuId,
                  memberId: userInfoGet().id,
                }
                getProductInfosBySkuId(param, (data) => {
                  if (data.code === 1) {
                    elem.productId = data.payload.sku.productId
                  }
                })
              }
            } else {
              vm.$toast('系统异常')
            }
          })
        } else {
          if (vm.URL) {
            vm.$router.push({ path: vm.URL })
          } else {
            vm.$router.back(-1)
          }
        }
        
      },
      turnDetailPage (id) {
        // sessionStorage.setItem('coupon', JSON.stringify({ coupon: false, isFund: false }))
        sessionStorage.removeItem('coupon')
        this.$router.push('/goods/' + id)
      },
      cancelCollection (id) {
        let vm = this
        MessageBox.confirm('', {
          title: '取消收藏',
          message: '是否取消收藏这个商品',
        }).then(() => {
          let params = {
            memberId: userInfoGet().id,
            skuId: id,
          }
          joinMyFindOrFoot(params, (data) => {
            if (data.code === 1) {
              vm.collectedGoods.forEach(function (elem, index) {
                if (elem.skuId === id) {
                  vm.collectedGoods.splice(index, 1)
                }
              })
            } else {
              vm.$toast('取消收藏失败')
            }
          })
        })
      },
      // 搜索
      seach() {
        let vm = this
        vm.isSearch = true
        let searchGoods = []
        vm.collectedGoods.forEach(function (elem, index) {
          if (elem.productName.toLowerCase().indexOf(vm.seachCnt.toLowerCase()) != -1) {
            searchGoods.push(elem)
          }
        })
        vm.collectedGoods = searchGoods
        vm.seachCnt = ''
      },
      // 上拉加载更多
      // loadMore() {
      //   let vm = this
      //   vm.loading = true
      //   vm.loadingDom = true
      //   vm.offset = 10 + vm.offset
      //   let params = {
      //     memberId: userInfoGet().id,
      //     type: 1,
      //   }
      //   queryFindOrFoot(params, (data) => {
      //     if (data.code === 1 && data.payload.length > 0) {
      //       vm.$nextTick(() => {
      //         data.payload.forEach((item) => {
      //           vm.collectedGoods.push(item)
      //         })
      //         for (let p of vm.collectedGoods) {
      //           p.price = (p.price / 100).toFixed(2)
      //         }
      //       })
      //       vm.loading = false
      //     } else {
      //       vm.loading = true
      //       vm.offset -= 10
      //       vm.$toast('暂未请求到数据,请稍后再试')
      //     }
      //     vm.loadingDom = false
      //   })
      // },
    },
    mounted(){
      document.body.style.paddingBottom = 0
      let vm = this
      let params = {
        memberId: userInfoGet().id,
        type: 1,
      }
      queryFindOrFoot(params, (data) => {
        if (data.code === 1 && data.payload.length > 0) {
          vm.collectedGoods = data.payload.reverse()
          for (let elem of vm.collectedGoods) {
            elem.price = (elem.price / 100).toFixed(2)
            let param = {
              skuId: elem.skuId,
              memberId: userInfoGet().id,
            }
            getProductInfosBySkuId(param, (data) => {
              if (data.code === 1) {
                elem.productId = data.payload.sku.productId
              }
            })
          }
          vm.ImgHeight = document.body.clientWidth * 0.4 + 'px'
          window.onresize = function windowResize() {
            vm.ImgHeight = document.body.clientWidth * 0.4 + 'px'
          }
        } else {
          // console.log('查询失败')
        }
      })
    },
  }
</script>
<style scoped>
.top{
  width: 100%;
  padding: .5rem 0;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.comeback{
  position: absolute;
  left: .5rem;
}
.comeback div{
  width: 1rem;
  height: 1rem;
}
.comeback img{
  display: block;
  height: 1rem;
}
/* 搜索框 */
.seachGoods{
  position: relative;
  width: 90%;
  text-align: center;
  z-index: 6;
}
.seachGoods input{
  padding: .5rem;
  border-radius: 1rem;
  border: 1px solid #AAAAAA;
  outline: none;
  width: 80%;
  background-color: transparent;
}
.seachGoods input::placeholder{
  color: #AAAAAA;
}
.seachGoods section{
  width: 1.1rem;
  position: absolute;
  top: 20%;
  right: 10%;
}
.seachGoods section img{
  width: 100%;
}
.goods{
  display: flex;
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  position: relative;
  border-top: 1px solid #F6F6F6;
}
.goods-img{
  width: 40%;
  padding: 0;
  margin: 0;
}
.goods-img img{
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.goods-info{
  width: 48%;
  margin-left: 5%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: left;
  font-size: .9rem;
}
.goods-info-name{
  height: 2.4rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods-price{
  color: rgb(226,35,25);
}
.div-blank{
  width: 2.5rem;
  height: 1.5rem;
  border: 1px solid #fff;
  margin: 0;
  padding: 0;
}
.collectedLogo {
  width: 1.3rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  right: 4%;
  bottom: 8%;
}
.collectedLogo img{
  width: 100%;
  height: 100%;
}
</style>